---
title: Community R3F Components
description: This page showcases some React Three Fiber/r3f community components that have not been merged to the drei components collection or to another pmndrs project. 
nav: 4
---

If you'd like to list new community components, please make a PR to [this doc](https://github.com/pmndrs/react-three-fiber/tree/master/docs/getting-started/community-r3f-components.mdx) file. It showcases some r3f community components that have not been merged to to the [drei](http://drei.docs.pmnd.rs) components collection or to another [pmndrs](https://github.com/pmndrs) project.

## R3F community components 

### Repos and docs

This page showcases some React Three Fiber/r3f community components that have not been merged to the [drei](http://drei.docs.pmnd.rs) components collection or to another [pmndrs](https://github.com/pmndrs) project. If you'd like to list new community components, please make a PR to [this doc](https://github.com/pmndrs/react-three-fiber/tree/master/docs/getting-started/community-r3f-components.mdx) file. 

#### Data sources

 - [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS/) (r3f [readme](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/src/r3f/README.md)) repo with doc
 - Luma Labs [Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber) renderer doc with demos
 - [NYTimes/three-loader-3dtiles](https://nytimes.github.io/three-loader-3dtiles) 

#### Renderers & frameworks

 - Takram three-geospatial [clouds doc](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/clouds) and [demos](https://takram-design-engineering.github.io/three-geospatial/?path=/story/clouds-3d-tiles-renderer-integration--tokyo), and [atmosphere doc](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/atmosphere)
 - [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber) doc and demos
 - [Theatre-js](https://github.com/theatre-js/theatre) repo and [doc](https://www.theatrejs.com/docs/latest)

#### Materials

 - [FarazzShaikh/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)
 - [pmndrs/THREE.MeshLine](https://github.com/pmndrs/meshline)
 - [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)
 - [troika-three-text](https://github.com/protectwise/troika/tree/main/packages/troika-three-text)

#### Utilities

 - [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf)


### Codesandboxes and demos

<Grid cols={3}>
  <li>
    [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS)

    [<Img src="https://raw.githubusercontent.com/NASA-AMMOS/3DTilesRendererJS/master/images/header-mars.png" alt="3DTilesRendererJS r3f demo" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/r3f/basic.html)
  </li>
  <li>
    [Takram three-geospatial clouds](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/clouds)

    [<Img src="https://github.com/takram-design-engineering/three-geospatial/raw/main/packages/clouds/docs/london.jpg" alt="Takram three-geospatial clouds" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://takram-design-engineering.github.io/three-geospatial/?path=/story/clouds-3d-tiles-renderer-integration--tokyo)
  </li>
  <li>
    [Luma Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber)
    <Codesandbox id="h2fkgq" />
  </li>
  <li>
    [NYTimes/three-loader-3dtiles](https://github.com/nytimes/three-loader-3dtiles/blob/dev/examples/r3f/src/index.tsx)

    [<Img src="https://rd.nytimes.com/static/1ffcbe7f02d6168aecebdb7a84929dcf/1b9fc/7579e21f-3af0-46bb-a073-28c4a97594f9_Demo4.jpg" alt="three-loader-3dtiles r3f demo" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://nytimes.github.io/three-loader-3dtiles/dist/web/examples/demos/realitycapture/)
  </li>
  <li>
    [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber)
    <Codesandbox id="xzlmzz" screenshot_url="https://blog.lookingglassfactory.com/content/images/size/w2000/2024/05/LKG-32-Spatial-Display-Portrait-Cleopatra-1.jpg"/> 
  </li> 
  <li>
    [Theatre-js](https://github.com/theatre-js/theatre)
    <Codesandbox id="6xfrsv" screenshot_url="https://www.theatrejs.com/images/docs/0.5/manual/studio/ui.png" />
  </li>
  <li>
    [Farazz/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)

    [<Img src="https://raw.githubusercontent.com/FarazzShaikh/THREE-CustomShaderMaterial/main/assets/waves-demo.png" alt="THREE-CustomShaderMaterial r3f demo" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://farazzshaikh.github.io/THREE-CustomShaderMaterial/#/caustics)
  </li>
  <li>
    [Takram three-geospatial atmosphere](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/atmosphere)

    [<Img src="https://media.githubusercontent.com/media/takram-design-engineering/three-geospatial/main/packages/atmosphere/docs/manhattan.jpg" alt="Takram three-geospatial atmosphere" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://takram-design-engineering.github.io/three-geospatial/?path=/story/atmosphere-3d-tiles-renderer-integration--manhattan)
  </li>
  <li>
    [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf)
    <Codesandbox id="ykfpwf" />
  </li>
  <li>
    [pmndrs/THREE.MeshLine](https://github.com/pmndrs/meshline)
    <Codesandbox id="vl221" />
  </li>
  <li>
    [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)

    [<Img src="https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/main/thumbnail.png" alt="R3F-Ultimate-Lens-Flare demo" className="aspect-[16/9] object-cover"  width="1763" height="926" />](https://ultimate-lens-flare.vercel.app/)
  </li>
</Grid>
